<template>
    <div class="barWrap" ref="piebox" ></div>
</template>

<script>
import echarts from '../../utils/echarts'

export default {
  data() {
    return {
        optionSet: {
        color: ['#35b2fa', '#f77c82','#6981f4','#506afb','#48d69b'],
        //   title: {
        //     text: this.title+'数量统计',
        //     subtext: '',
        //     left: 'left',
        //     color: '#999'
        // },
        textStyle: {
            color: '#999'
        },
        legend: {
          // show:false,
          type: 'plain',
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: {
            name: this.title,
            type: 'pie',
            radius: ['60%', '70%'],
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [],
        }
      },
      dataList: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
    };
  },
  props: {
    // dataList: {
    //   type: Object,
    //   detail: {
    //       xLine:[],
    //       yLine:[]
    //   }
    // },
    title: {
      type: String,
      detail: ""
    },
    piebox: {
      type: String,
      detail: ""
    },
    selectKey: {
      type: String,
      detail: ''
    }
  },
  mounted() {
    //   console.log(999)
    // if (this.xLine && (this.xLine.length>0)) {
        this.canvasAction()
    // }
  },
  beforeDestroy(){
    //   console.log(1111)
    //   echarts.init(this.$refs.piebox).clear()
  },
  methods: {
      canvasAction(){
        this.optionSet.series.data = this.dataList
        this.myChart = echarts.init(this.$refs.piebox)
        this.myChart.setOption(this.optionSet)
        window.onresize = this.myChart.resize;
      }
  }
};
</script>

<style lang="less" scoped>
   .barWrap{
      //  width: calc(100vw - 360px);
       height: 320px;
   }
</style>